<template>
<div class="List">
  <el-button @click="show =! show" class="ListTitle">
    清单
    <el-button @click.stop="" class="ListTitleRight">
      <svg t="1638903327660" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3056" width="200" height="200"><path d="M853.333333 480H544V170.666667c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v309.333333H170.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h309.333333V853.333333c0 17.066667 14.933333 32 32 32s32-14.933333 32-32V544H853.333333c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32z" p-id="3057" fill="#2c2c2c"></path></svg>
    </el-button>
  </el-button>
  <transition name="el-zoom-in-top">
    <div v-show="show" class="transition-box">
      用清单来分类收集,组织和管理你的任务和笔记
    </div>
  </transition>
</div>
</template>

<script>
export default {
name: "ManPageMiddleList",
data(){
  return{
    show:true
  }
}
}
</script>

<style scoped>
.List{
  font-size: 12px;
  width: 90%;
  display: flex;
  flex-direction: column;
  margin: 2px 0;
  border-radius: 4px;
}
.ListTitle{
  font-size: 12px;
  width: 100%;
  text-align: left;
  border: none;
  display: flex;
  padding: 8px 12px;
  justify-content: space-between;
}
.transition-box{
  background: #f3f2f2;
  padding: 2px 6px;
  color: #858282;
}
.ListTitleRight{
  border: none;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  vertical-align: -40%;
  padding: 0;
  background: transparent;
}
svg{
  width: 20px;
  height:20px;
}
</style>